<template>
  <div class="account-page">
    <div class="account-contain">
      <div class="account-nav">
        <van-nav-bar title="账号及安全" left-text="" right-text="" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="account-content">
        <div class="account-list">
          <div class="account-item" @click.stop.prevent="bindTel">
            <div class="title">手机号</div>
            <div class="info">
              <span v-show="isBindTel">15172510521</span>
              <span v-show="!isBindTel">您还未绑定手机号</span>
              <span v-show="!isBindTel" class="arrow-icon">
                <van-icon name="arrow" />
              </span>
            </div>
          </div>
          <div class="account-item">
            <div class="title">微信账号</div>
            <div class="info">
              <span>Pony</span>
            </div>
          </div>
          <div class="account-item logout-item" @click="logOut">
            <div class="title">退出登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { CODE, APIURI } from '#/common/js/apiConst'
import { NavBar, Icon } from 'vant'

Vue.use(NavBar).use(Icon)
export default {
  data() {
    return {
      isBindTel: false,
      isBindPas: false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: '/user' })
    },
    bindTel() {
      if (!this.isBindTel) {
        this.$router.push({ path: '/user/bind' })
      }
    },
    logOut() {
      this.$axios
        .get(APIURI + '/logout')
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            // console.log(res.data)
            this.$router.push({ path: '/' })
          }
        })
        .catch(function(err) {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
.account-page {
  .account-content {
    margin-top: 15px;
    background-color: $white;
    .account-list {
      margin: 0 15px;
      .account-item {
        @include spaceBetweenCenter();
        height: 47px;
        font-size: 14px;
        border-bottom: 1px solid #ebebeb;
        &:last-child {
          border-bottom: none;
        }
        .title {
          font-size: 14px;
          color: #444;
        }
        .info {
          @include leftFlexCenter();
          color: #aaa;
        }
      }
    }
  }
}
</style>

